<template>

  <div class="manager-container">
<!--    头部区域-->
    <div class="manager-header">
      <div class="manager-header-left">
        <img src="@/assets/img/img.png">
        <div class="title">管理系统</div>
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Manager/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{router.currentRoute.value.meta.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="manager-header-right">
        <el-dropdown style="cursor: pointer">
          <div style="padding-right: 20px;display: flex;align-items: center">
            <img style="width: 40px;height: 40px;border-radius: 50%;" :src="data.user.avatar">
            <span style="margin-left: 5px;color: white">{{ data.user.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人资料</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/password')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
<!--   下面区域-->
    <div style="display: flex">
      <div class="manager-main-left">
        <el-menu :default-active="router.currentRoute.value.path" :default-openeds="['1','2']" router>
          <el-menu-item index="/manager/home">
            <el-icon><HomeFilled /></el-icon>
            <sapn>系统首页</sapn>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>
              <sapn>信息管理</sapn>
            </template>
            <el-menu-item index="/manager/orders">借书订单</el-menu-item>
            <el-menu-item index="/manager/category">图书分类</el-menu-item>
            <el-menu-item index="/manager/book">图书信息</el-menu-item>
            <el-menu-item index="/manager/notice">系统公告</el-menu-item>
            <el-menu-item index="/manager/postsSection">社区版块</el-menu-item>
            <el-menu-item index="/manager/posts">社区帖子</el-menu-item>
            <el-menu-item index="/manager/activity">活动信息</el-menu-item>
            <el-menu-item index="/manager/sign">活动报名</el-menu-item>
            <el-menu-item index="/manager/collect">活动收藏</el-menu-item>
            <el-menu-item index="/manager/room">阅览室信息</el-menu-item>
            <el-menu-item index="/manager/seat">座位信息</el-menu-item>
            <el-menu-item index="/manager/seatReserve">座位预约</el-menu-item>
            <el-menu-item index="/manager/comment">评论信息</el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Menu /></el-icon>
              <sapn>用户管理</sapn>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="manager-main-right">
        <RouterView @updateUser="updateUser"/>
      </div>
    </div>
  </div>
</template>

<script setup>

import router from "@/router/index.js";
import {reactive} from "vue";
import {ElMessage} from "element-plus";



const data =reactive({
  user:JSON.parse(localStorage.getItem('xm-user')||'{}')
})

if(data.user.role === 'USER'){
  location.href='/login'
}

const logout = () => {
  localStorage.removeItem('xm-user')
  location.href='/login'
}
const updateUser = () => {
  data.user=JSON.parse(localStorage.getItem('xm-user')||'{}')
}
</script>

<style scoped>
@import "@/assets/css/Manager.css";
</style>